//默认情况夏，直接使用webpack .\src\main.js --output-filename  .\dist\bundle.js --output-path .  --mode development就能实现项目的构建了
//但是，如果只是运行webpack命令的话，需要在i项目的根目录中，创建webpack.config.js的文件
//而且，在这个配置文件中，必须显示声明要处理文件的路径和输出的文件的路径

const path = require('path')

//导入把HEML页面生成到内存中的插件
const htmlWebpackPlug = require('html-webpack-plugin')//导入的是一个构造函数
//导入webpack插件
const webpack = require('webpack')

//导入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//注意:这里使用Node中的语法，向外暴露了一个配置对象
//因为 webpack这个构建工具，底层就是使用Node.js开发出来的

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output:{
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins:[//插件数组
        new htmlWebpackPlug({//创建一个把HTML首页托管到内存中的插件
            template:'./src/index.html',//要把哪个HTML页面作为模板复制一份托管到内存中
            filename:'index.html'//指定，将来在内存中复制出来的页面，名称叫做index.html
        }),
        //new webpack.HotModuleReplacementPlugin()
        new VueLoaderPlugin(),
    ],
    // devServer:{// webpack-dev-server运行时候的指令
    //     //--open --port 3000 --host 127.0.0.1 --hot
    //     // open:true,
    //     port:3000,
    //     host:'127.0.0.1',
    //     hot:true,//启用热更新,这里的hot指令，需要配合一个热更新的 webpack插件才能正常使用
    // },
    module:{//用来配置非JS文件对应的loader的
        rules:[//就是这样非JS文件和loader之间对应关系
            {test:/\.css$/,use:['style-loader','css-loader']},//创建处理css文件的loader匹配规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理cscc文件的规则
            {test:/\.jpg|png|jpeg|gif|bmp$/,use:{loader:'url-loader?limit=2500&name=[hash:8]-[name].[ext]',options:{esModule: false}}},//配置处理样式表中图片的规则
            {test:/\.vue$/,use:'vue-loader'},//解析Vue组件的第三方loader
            {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},//处理样式中字体文件路径的问题
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
        ]
    },
    

}


